<template>
  <view class="container" v-if="comments">
    <view class="comment" v-for="item in comments" :key="item.commentID">
      <image :src="item.avatarURL" mode="aspectFill" class="avatar"></image>
      <view style="display: flex; flex-direction: column; flex-grow: 1; width: 100%">
        <view class="info">
          <view class="name">{{ item.name }}</view>
          <view class="time">{{ item.createTimeStr }}</view>
        </view>
        <view class="content">{{ item.content }}</view>
        <view
          @click.stop="handlePopupOpen(item.commentID)"
          v-if="item.userID === useUserStore.userInfo.userID"
          class="delete-btn"
          >删除</view
        >
      </view>
    </view>
  </view>
  <view class="no-data" v-else>暂无评论</view>
  <view class="no-more" v-if="noMore && comments">没有更多评论啦</view>
  <uni-popup ref="popupRef" type="dialog">
    <uni-popup-dialog
      type="warning"
      cancelText="取消"
      confirmText="确认"
      title="警告"
      content="确认要删除该评论吗？"
      @confirm="handleDelete"
    ></uni-popup-dialog>
  </uni-popup>
</template>

<script setup>
  import { GetCircleComments, DeleteCircleComment } from '@/apis/circle'
  import { onLoad } from '@dcloudio/uni-app'
  import { defineProps, ref } from 'vue'
  import { userStore } from '@/store/user'

  defineExpose({
    getComments,
    refresh
  })

  const props = defineProps({
    id: Number
  })
  const comments = ref()
  const currentPage = ref(0)
  const noMore = ref(false)
  const useUserStore = userStore()
  const popupRef = ref()

  const emit = defineEmits(['refresh'])

  function refresh() {
    noMore.value = false
    comments.value = undefined
    currentPage.value = 0
    getComments()
    popupRef.value.close()
  }

  function getComments() {
    if (noMore.value) return
    currentPage.value++
    GetCircleComments({
      circleID: props.id,
      page: currentPage.value
    }).then((res) => {
      if (!res.data) {
        noMore.value = true
        return
      }
      if (comments.value) {
        comments.value = comments.value.concat(res.data)
      } else {
        comments.value = res.data
      }
      if (comments.value.length >= res.total) {
        noMore.value = true
      }
      console.log(res.data)
    })
  }

  function handlePopupOpen(id) {
    popupRef.value.open()
    commentID.value = id
  }

  const commentID = ref(0)

  function handleDelete() {
    DeleteCircleComment({ commentID: commentID.value }).then(async (res) => {
      uni.showToast({
        title: res.message,
        icon: 'success'
      })
      noMore.value = false
      comments.value = undefined
      currentPage.value = 0
      await getComments()
      popupRef.value.close()
    })
  }

  onLoad(() => {
    getComments()
  })
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    padding: 0 20rpx;
    .comment {
      display: flex;
      width: 100%;
      gap: 20rpx;
      min-height: 140rpx;
      border-bottom: 1px solid #eee;
      padding: 10rpx;
      &:first-child {
        border-top: 1px solid #eee;
      }
      .avatar {
        min-width: 80rpx;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        aspect-ratio: 1/1;
      }
      .info {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name {
          color: $my-wzut-icon-primary;
          font-size: 28rpx;
          font-weight: bold;
        }
        .time {
          color: #888;
          font-size: 16rpx;
        }
      }
      .content {
        width: 100%;
        margin-top: 10rpx;
        overflow: hidden;
        word-break: break-all;
      }
      .delete-btn {
        text-align: right;
        font-size: 24rpx;
        color: $my-wzut-icon-primary;
        &:active {
          filter: contrast(0.8);
        }
      }
    }
  }
  .no-data,
  .no-more {
    text-align: center;
    font-size: 24rpx;
    // margin: 20rpx 0;
    color: #666;
  }
  .no-more {
    padding: 20rpx 0;
  }
</style>
